<template>
    <div>
        <el-dialog title="巡检项管理" :visible.sync="visible" width="30%" center @closed="dialogReset">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="巡检点ID" prop="pointId" v-show="false">
                    <el-input v-model="form.pointId" disabled></el-input>
                </el-form-item>
                <el-form-item label="巡检项ID" prop="id">
                    <el-input v-model="form.id" disabled></el-input>
                </el-form-item>
                <el-form-item label="巡检项名称" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="巡检项类型" prop="itemType">
                    <el-select v-model="form.itemType" placeholder="请选择巡检项类型">
                        <el-option label="状态型" :value="1"></el-option>
                        <el-option label="数值型" :value="2"></el-option>
                        <el-option label="文本型" :value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="this.form.itemType === 1" label="可选值" prop="optionalValue">
                    <el-input v-model="form.optionalValue"></el-input>
                </el-form-item>
                <el-form-item v-if="this.form.itemType === 2"  label="最小值" prop="minValue">
                    <el-input v-model="form.minValue"></el-input>
                </el-form-item>
                <el-form-item v-if="this.form.itemType === 2" label="最大值" prop="maxValue">
                    <el-input v-model="form.maxValue"></el-input>
                </el-form-item>
                <el-form-item label="是否必须反馈" prop="isFeedback">
                    <el-checkbox label="是否必须反馈" name="type" v-model="form.isFeedback"></el-checkbox>
                    <el-tooltip class="item" effect="light" content="如果该巡查项设为必须反馈，则巡检执行人在手机APP端反馈巡检结果时，该巡查项不能留空。" placement="right-start">
                        <i class="el-icon-question" />
                    </el-tooltip>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {nanoid} from 'nanoid'

    export default {
        name: "item-add",
        data() {
            return {
                visible: false,
                form: {
                    id: null,
                    name: '',
                    itemType: 1,
                    optionalValue: '',
                    minValue: '',
                    maxValue: '',
                    isFeedback: false,
                    pointId: null
                }
            }
        },
        methods: {
            dialogReset() {
                this.$refs['form'].resetFields();
            },
            init(pointId) {
                this.visible = true;
                this.$nextTick(() => {
                    this.$refs['form'].resetFields();
                    this.form.pointId = pointId;
                });
            },
            submitForm() {
                // 当巡检项的结果为【状态型】时，把数值型中的 minvalue 和 maxvalue 设置为 0
                // 当巡检项的结果为【数值型】时，把状态型中的 optionalValue 设置为 无
                if (this.form.itemType === 1) {
                    this.form.minValue = 0;
                    this.form.maxValue = 0;
                } else if (this.form.itemType === 2 || this.form.itemType === 3) {
                    this.form.optionalValue = '无';
                }

                let params = {
                    id: nanoid(),
                    name: this.form.name,
                    itemType: this.form.itemType,
                    optionalValue: this.form.optionalValue,
                    minValue: this.form.minValue,
                    maxValue: this.form.maxValue,
                    isFeedback: this.form.isFeedback ? 1 : 0,
                    pointId: this.form.pointId
                };

                console.log(params);
                this.showMessage('添加巡检项成功', params);
            },
            showMessage(msg, params) {
                this.$message({
                    message: msg,
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        this.visible = false;
                        this.$emit('refreshitem', params);
                    }
                });
            }
        },
        filters: {
            tranFeedback(feedback) {
                return feedback === 1;
            },
            tranItemType(type) {
                if (type === 1) return '状态型';
                if (type === 2) return '数值型';
                if (type === 3) return '文本型';
            }
        }
    }
</script>

<style scoped>

</style>
